<!--勤务监控-->

<template>
    <div class="fixedFullSscreenBox text-light-blue">
        <div id="mapInforDetailBox"></div>
        <!--勤务监控-->
        <!--left-->
        <div class="expresswayLeftBox" v-if="pageType">
            <ExpresswaySummary @showDetail="showExpresswaySummaryDetail"></ExpresswaySummary>
            <!--安全风险预警 width512px-->
            <SafetyWarning @checkRiskWarning="openRiskWarningModal"></SafetyWarning>
            <!--勤务运行概览-->
            <ServiceSummary></ServiceSummary>
        </div>

        <div class="expresswayLeftBox2" v-else>
            <PoliceSituation></PoliceSituation>
            <ThreeDataTabs @checkRiskWarning="openRiskWarningModal"></ThreeDataTabs>
        </div>

        <!--rightbox-->
        <div class="expresswayRightBox" v-if="pageType">
            <!--动态勤务效果-->
            <DynamicService @showModal=openPatrolEvaluationModal></DynamicService>
            <!--勤务排名-->
            <PoliceRanking></PoliceRanking>
        </div>

        <div class="expresswayRightBox2" v-else>
            <div class="roadSearchBox">
                <RoadSearch :mapApp="mapApp"></RoadSearch>
            </div>
        </div>

        <!--hearder-->
        <div style="position:absolute;z-index: 2" class="w-100 flexCenter">
            <div class="switchPage" @click="switchPageTo">
            </div>
            <img src="../../assets/img/dutyMonitoring/titleDuty.png" class="img-fluid mx-auto" alt="" v-if="pageType">
            <img src="../../assets/img/emergencyDuty/titleEmergencyDuty.png" class="img-fluid mx-auto" alt="" v-else>
        </div>
        <!--footer-->
        <div class="tabFooterBox" style="position:absolute;z-index: 2;bottom:0">
            <expresswayTabs ref="expresswayTabs" @switch="switchTab" @toCenter="moveCenter"
                            :mapApp="mapApp"></expresswayTabs>
        </div>
        <!--map-->
        <div class="fullSscreenBox" style="background-color: #0a2352">
            <div id="map"></div>
        </div>
        <!--巡查评价模态框-->
        <div v-show="patrolEvaluationModalShow">
            <PatrolEvaluationModal @cancel="patrolEvaluationModalShow = false;modalMaskShow=false"
                                   ref="patrolEvaluationModal"></PatrolEvaluationModal>

        </div>
        <div class="modal-mask" v-show="modalMaskShow"></div>


        <Jmodal2 :visible="riskWarningModalVisible"
                 :title="riskWarningData.highSpeedName+riskWarningData.detailLocation+'安全风险预警'"
                 left="700" top="400" width="500" @cancel="riskWarningModalCancel">
            <div id="riskWarningScatterId" style="width:468px;height:300px">

            </div>
        </Jmodal2>

    </div>
</template>
<script>
    import ExpresswaySummary from "@/components/expressway/expresswaySummary.vue";
    import SafetyWarning from "@/components/expressway/safetyWarning.vue";
    import ServiceSummary from "@/components/expressway/serviceSummary.vue";
    import DynamicService from "@/components/expressway/dynamicService.vue";
    import PoliceRanking from "@/components/expressway/policeRanking.vue";
    import PatrolEvaluationModal from "@/components/expressway/patrolEvaluationModal.vue";

    import PoliceSituation from "@/components/emergency/policeSituation.vue";
    import ThreeDataTabs from "@/components/emergency/threeDataTabs.vue";

    import expresswayTabs from "@/components/expressway/expressway-tabs.vue";
    import SwitchTimeTab from "@/components/switch-time-tab.vue";

    import RoadSearch from "@/components/emergency/road-search.vue";
    import Jmodal2 from "@/components/jmodal2.vue";

    import echarts from 'echarts'
    import Vue from 'vue'

    import {
        getAccidentBlack, getConstructionList, getexpresswayList, getFogCollision, getFogDetection,
        getGsPoints, getGuidanceScreen, getMeteorologicalDetection,
        getPoliceStrength,
        geTrafficSituation, getFaceWarningScatter,
        getRordBayonet, getSafetyWarningWay, getShouting, getSlipperySection, getTollGate,
        getTrafficAccident, getVideoList,
        login, pileToCrd
    } from "../../common/api";
    import store from "@/common/vuex";
    import {echartsScatterFactory} from "../../common/echart-config/echart-config";
    import {tabCode, trafficLevel} from "../../common/data/sys-data";
    import {GetCenterPoint} from "../../utils/js-utils";


    export default {
        name: "expressway",
        components: {
            expresswayTabs,
            SwitchTimeTab,
            ExpresswaySummary,
            SafetyWarning,
            ServiceSummary,
            DynamicService,
            PoliceRanking,
            PatrolEvaluationModal,
            PoliceSituation,
            ThreeDataTabs,
            RoadSearch,
            Jmodal2,

        },
        data() {
            return {
                mapApp: null,
                pageType: true, //false

                modalMaskShow: false,
                patrolEvaluationModalShow: false,

                expresswayLines: [], //高速绘制线
                mapDraws: {}, //地图元素
                // mapDrawType: 0, //0点 1线


                //风险预警散列图
                riskWarningModalVisible: false,
                riskWarningData: {},
                riskWarningScatterChart: null,
            }
        }, methods: {
            switchPageTo() {
                this.pageType = !this.pageType;
            },
            openPatrolEvaluationModal(tamiRange) { //巡逻评价模态框
                console.log(tamiRange);
                this.$refs.patrolEvaluationModal.doSearch(tamiRange);
                this.modalMaskShow = true;
                this.patrolEvaluationModalShow = true;
            },

            // roadSearch(road) { //道路查询
            //     console.log(road);
            // },


            drawExpressWay() { //绘制高速路线
                getexpresswayList().then(res => {
                    if (res.isSuccess) {
                        var pionts = res.data;
                        console.log(pionts);
                        const getCenterPoint = new GetCenterPoint();
                        pionts.forEach((v) => {
                            getCenterPoint.addL(v.range)
                            var polylineObj = {strcoords: v.range, color: '#01FFFF', opacity: 0.3};
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            this.expresswayLines.push(polyline);
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },

            mapInitFun() {
                // {mapStyle: 'darkStyle'}
                // this.mapApp = new HiMap(document.getElementById("map"));
                this.mapApp = new HiMap(document.getElementById("map"), {mapStyle: 'darkStyle'});
                // this.mapApp.zoomTo(3);
                this.mapApp.moveTo("120.4289,36.26848");
                this.drawExpressWay();
            },

            drawTrafficSituation(tab) { //绘制 路况
                var reqbody = {nlevel: 3};
                geTrafficSituation(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addL(v.range);
                            const levelInfor = trafficLevel[v.rlevel];
                            const linestyle = v.status == 1 ? "none" : "dashdot";
                            var polylineObj = {
                                strcoords: v.range,
                                linestyle: linestyle,
                                color: levelInfor.color
                            };
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            polyline.addListener('click', tab.showDetail(v));
                            tab.mapDraws.push(polyline);
                        });
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },


            drawSafetyWarningWay(tab) { //风险预警
                var reqbody = {nlevel: 3};
                getSafetyWarningWay(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addL(v.range)
                            // var levelInfor = trafficLevel[v.rlevel];
                            var polylineObj = {strcoords: v.range, color: "#ffc800"};
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            tab.mapDraws.push(polyline);

                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },

            getConstructionList(tab) { //施工
                var reqbody = {nlevel: 3};
                getConstructionList(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addL(v.range)
                            var polylineObj = {strcoords: v.range, color: tab.color};
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            tab.mapDraws.push(polyline);

                        })
                        tab.center = getCenterPoint.getCenter()
                        this.mapApp.moveTo(tab.center);
                    }
                })
            },
            drawTrafficAccident(tab) { //绘制 事故
                var reqbody = {nlevel: 3};
                getTrafficAccident(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addP(v.coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: v.coordinate,
                                title: v.incidentLocation,
                                imgurl: require('../../assets/img/map/accident.png')
                            });
                            monitor.addListener('click', tab.showDetail(v));
                            tab.mapDraws.push(monitor)
                        })
                        tab.center = getCenterPoint.getCenter()
                        this.mapApp.moveTo(tab.center);
                    }
                })
            },

            drawPoliceStrength(tab) { //绘制 警力
                var reqbody = {nlevel: 3};
                getPoliceStrength(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            if (v.coordinate == "0.0,0.0") {
                                return;
                            }
                            getCenterPoint.addP(v.coordinate);
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: v.coordinate,
                                title: v.policeName,
                                imgurl: require('../../assets/img/map/police.png')
                            });
                            monitor.addListener('click', tab.showDetail(v));
                            tab.mapDraws.push(monitor)
                        });
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            drawRordBayonet(tab) { //绘制 卡口
                var reqbody = {nlevel: 3};
                getRordBayonet(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            var coordinate = v.longitude + "," + v.latitude
                            getCenterPoint.addP(coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: coordinate,
                                title: v.name,
                                imgurl: require('../../assets/img/map/bayonet.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            getVideoList(tab) { //绘制 视频
                var reqbody = {nlevel: 3};
                getVideoList(reqbody).then(res => {
                    console.log(res);
                    if (res && res.rows && res.rows.length > 0) {
                        const getCenterPoint = new GetCenterPoint();
                        res.rows.forEach((v) => {
                            if (v.coordinate == "0.0,0.0") {
                                return;
                            }
                            const coordinate = v.longitude + "," + v.latitude;
                            getCenterPoint.addP(coordinate);
                            var monitor = this.mapApp.showMonitor({
                                width: 32,
                                height: 32,
                                strcoords: coordinate,
                                title: v.title,
                                imgurl: require('../../assets/img/map/vdeo.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },

            getFogDetection(tab) { //绘制 雾区检测器
                var reqbody = {nlevel: 3};
                getFogDetection(reqbody).then(res => {
                    console.log(res);
                    if (res && res.rows && res.rows.length > 0) {
                        const getCenterPoint = new GetCenterPoint();
                        res.rows.forEach((v) => {
                            const coordinate = v.longitude + "," + v.latitude;
                            getCenterPoint.addP(coordinate);
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: coordinate,
                                title: v.title,
                                imgurl: require('../../assets/img/map/fogDetection.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            getFogCollision(tab) { //绘制 雾区防撞
                var reqbody = {nlevel: 3};
                getFogCollision(reqbody).then(res => {
                    console.log(res);
                    console.log(res && res.rows && res.rows.length > 0);
                    if (res.isSuccess) {
                        const getCenterPoint = new GetCenterPoint();
                        res.data.forEach((v) => {
                            getCenterPoint.addP(v.coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: v.coordinate,
                                title: v.name,
                                imgurl: require('../../assets/img/map/fogCollision.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            getMeteorologicalDetection(tab) { //绘制 气象检测器
                var reqbody = {nlevel: 3};
                getMeteorologicalDetection(reqbody).then(res => {
                    console.log(res);
                    if (res && res.rows && res.rows.length > 0) {
                        const getCenterPoint = new GetCenterPoint();
                        res.rows.forEach((v) => {
                            const coordinate = v.longitude + "," + v.latitude;
                            getCenterPoint.addP(coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: coordinate,
                                title: v.title,
                                imgurl: require('../../assets/img/map/meteorologicalDetection.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            getGuidanceScreen(tab) { //绘制 诱导屏
                var reqbody = {nlevel: 3};
                getGuidanceScreen(reqbody).then(res => {
                    console.log(res);
                    if (res && res.rows && res.rows.length > 0) {
                        const getCenterPoint = new GetCenterPoint();
                        res.rows.forEach((v) => {
                            const coordinate = v.longitude + "," + v.latitude;
                            getCenterPoint.addP(coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: coordinate,
                                title: v.title,
                                imgurl: require('../../assets/img/map/guidanceScreen.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            getShouting(tab) { //绘制 喊话设备
                var reqbody = {nlevel: 3};
                getShouting(reqbody).then(res => {
                    console.log(res);
                    if (res && res.rows && res.rows.length > 0) {
                        const getCenterPoint = new GetCenterPoint();
                        res.rows.forEach((v) => {
                            const coordinate = v.longitude + "," + v.latitude;
                            getCenterPoint.addP(coordinate)
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: coordinate,
                                title: v.title,
                                imgurl: require('../../assets/img/map/shouting.png')
                            });
                            tab.mapDraws.push(monitor)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            drawTollGate(type, tab) { //绘制 0 收费站，1 服务区
                var reqbody = {nlevel: 3, type: type};
                getTollGate(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addP(v.coordinate)
                            var iconImg = null;
                            if (type == 1) {
                                iconImg = require('../../assets/img/map/server.png')
                            } else {
                                if (v.status == 1) {
                                    iconImg = require('../../assets/img/map/gate-open.png')
                                } else if (v.status == 0) {
                                    iconImg = require('../../assets/img/map/gate-close.png')
                                } else {
                                    iconImg = require('../../assets/img/map/gate-open.png')
                                }

                            }
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: v.coordinate,
                                title: v.name,
                                imgurl: iconImg,
                            });
                            if (type == 0) {
                                monitor.addListener('click', tab.showDetail(v));
                            }
                            tab.mapDraws.push(monitor)
                        })
                        tab.center = getCenterPoint.getCenter()
                        this.mapApp.moveTo(tab.center);
                    }
                })
            },
            drawSlipperySection(type, tab) { //绘制 易滑路段 长下坡
                var reqbody = {nlevel: 3, type: type};
                getSlipperySection(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addL(v.range)
                            var polylineObj = {strcoords: v.range, color: (type ? '#ff000f' : '#eea104')};
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            tab.mapDraws.push(polyline);
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },

            drawAccidentBlack(tab) { //绘制 事故黑点 一段路
                var reqbody = {nlevel: 3};
                getAccidentBlack(reqbody).then(res => {
                    console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            getCenterPoint.addL(v.range)
                            var polylineObj = {strcoords: v.range, color: '#8b4aff'};
                            var polyline = this.mapApp.showPolyline(polylineObj);
                            tab.mapDraws.push(polyline);
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },

            cleanMapDraw(tab) {
                if (tab.mapDraws.length == 0) {
                    return;
                }
                if (tab.drawType === 0) { //点处理
                    tab.mapDraws.forEach((v) => {
                        this.mapApp.removeMonitor(v);
                    })
                } else if (tab.drawType === 1) { //线处理
                    tab.mapDraws.forEach((v) => {
                        this.mapApp.removeOverlay(v);
                    })
                }
                tab.mapDraws = [];
            },

            switchTab(tab) {
                if (!tab.active) {
                    this.cleanMapDraw(tab);
                    return;
                }
                switch (tab.code) {
                    case tabCode.roadConditions: //路况
                        this.drawTrafficSituation(tab);
                        break;
                    case tabCode.accident: //事故路况
                        this.drawTrafficAccident(tab);
                        break;
                    case tabCode.policeForces: //警力
                        this.drawPoliceStrength(tab);
                        break;

                    case tabCode.construction: //施工
                        this.getConstructionList(tab);
                        break;
                    case tabCode.video: //视频
                        this.getVideoList(tab);
                        break;
                    case tabCode.bayonet: //收费站
                        this.drawTollGate(0, tab);
                        break;
                    case tabCode.serviceArea: //服务区
                        this.drawTollGate(1, tab);
                        break;
                    case tabCode.safetyWarning: //安全预警
                        this.drawSafetyWarningWay(tab);
                        break;

                    // 二级
                    case tabCode.tollStation: //卡口
                        this.drawRordBayonet(tab);
                        break;
                    case tabCode.fogDetection: //雾区检测器
                        this.getFogDetection(tab);
                        break;
                    case tabCode.fogCollision: //雾区防撞
                        this.getFogCollision(tab);
                        break;
                    case tabCode.meteorologicalDetection: //气象检测器
                        this.getMeteorologicalDetection(tab);
                        break;
                    case tabCode.guidanceScreen: //诱导屏
                        this.getGuidanceScreen(tab);
                        break;
                    case tabCode.shouting: //喊话设备
                        this.getShouting(tab);
                        break;

                    case tabCode.slipperySection: //易滑路段
                        this.drawSlipperySection(0, tab);
                        break;
                    case tabCode.longDownhill: //长下坡
                        this.drawSlipperySection(1, tab);
                        break;
                    case tabCode.accidentBlackSpot: //事故黑点
                        this.drawAccidentBlack(tab);
                        break;

                }
            },
            showExpresswaySummaryDetail(flag) {
                this.$refs.expresswayTabs.tabSwitchByCode(flag);
            },
            //风险预警模态框控制
            openRiskWarningModal(data) {
                console.log("查询风险监控");
                console.log(data);
                data = Object.assign({},data)
                this.riskWarningData = data;
                this.riskWarningData.largeCarRate = (this.riskWarningData.largeCarRate * 100).toFixed(3) * 1;
                this.riskWarningModalVisible = true;
                getFaceWarningScatter().then(res => {
                    if (res.isSuccess) {
                        var resData = res.data;
                        var newDate = [];
                        var yellows = []
                        let offsetIndex = 0
                        resData.forEach((v, i) => {
                            v.big = (v.big * 100).toFixed(3) * 1;
                            if (v.big != data.largeCarRate || v.flow != data.trafficFlow) {
                                let a = [v.big, v.flow]
                                newDate.push(a);
                                if (v.yellow == 1) {
                                    yellows.push(i - offsetIndex);
                                }
                            } else {
                                offsetIndex = 1;
                            }
                        })
                        function randerColor(e) {
                            if (yellows.includes(e.dataIndex)) {
                                return '#F1BD4D'
                            } else {
                                return '#0DA1F6'
                            }
                        }

                        function funSize(e) {
                            if (e[0] == data.largeCarRate && e[1] == data.trafficFlow) {
                                return 14
                            } else {
                                return 8
                            }
                        }

                        var option = echartsScatterFactory(newDate, [[data.largeCarRate, data.trafficFlow]], randerColor, funSize);

                        this.riskWarningScatterChart = echarts.init(document.getElementById('riskWarningScatterId'));
                        this.riskWarningScatterChart.setOption(option);

                    }
                });
            },
            riskWarningModalCancel() {
                this.riskWarningModalVisible = false;
                this.riskWarningScatterChart.clear();
            },
            moveCenter(center) {
                this.mapApp.moveTo(center);
            },


        },
        beforeDestroy() {

        },
        mounted() {
            if (this.$store.state.isMapReady) {
                this.mapInitFun();
            } else {
                this.$store.subscribe((mutation, state) => {
                    if (mutation.type == 'isMapReady' && mutation.payload) {
                        this.mapInitFun();
                    }
                })
            }

            pileToCrd(1, 2).then()

            // console.log(111122222)
            // console.log(Jmodal2)
            // var myAppendTo = Vue.extend(Jmodal2)
            // var mo = new myAppendTo()
            // console.log(mo)
            // mo.visible = true;
            // mo.$mount('#mapInforDetailBox')
            // new Vue(Jmodal2).$mount("#app")
        },
        beforeRouteEnter(to, from, next) {
            console.log('beforeRouteEnter ---- ');
            if (!store.state.isLogin) {
                login().then((res) => {
                    if (res.isSuccess) {
                        store.commit("setLoginInfor", res.data);
                        next()
                    } else {
                        // alert("获取用户信息失败");
                        next()
                    }
                }).catch((e) => {
                    // alert("获取用户信息失败")
                    next();
                })
            } else {
                next()
            }
        },


    }
</script>


<style scoped>
    .fixedFullSscreenBox {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    .switchPage {
        z-index: 2;
        width: 22px;
        height: 22px;
        background-image: url("../../assets/img/expresswayMapMode/switch.png");
        position: absolute;
        left: 50%;
        margin-left: 80px;
        top: 106px;
        cursor: pointer;
    }

    .expresswayLeftBox {
        position: absolute;
        bottom: 14px;
        top: 32px;
        width: 552px;
        z-index: 3
    }

    .expresswayLeftBox2 {
        position: absolute;
        bottom: 14px;
        top: 32px;
        width: 492px;
        z-index: 3
    }

    #map {
        width: 100%;
        height: 100%;
        z-index: 12;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .expresswayRightBox {
        position: absolute;
        bottom: 14px;
        top: 32px;
        right: 0;
        width: 552px;
        z-index: 3
    }

    .expresswayRightBox2 {
        position: absolute;
        bottom: 14px;
        top: 32px;
        right: 0;
        width: 300px;
        z-index: 3
    }

    .roadSearchBox {
        position: relative;
        padding: 50px 20px 20px 20px;
    }


</style>
